import {
  getPostByIdUsingGET,
  invodeInterfanceUsingPOST,
} from "@/services/lmxapibackend/interfanceInfoController";
import { useMatch } from '@@/exports';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Descriptions, Form, message } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import React, { useEffect, useState } from 'react';

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */

const IndexInrefanceInfo: React.FC = () => {
  let useMatch1 = useMatch('/interfanceinfo/:id');
  // let useParams1 = useParams();
  // alert(JSON.stringify(useMatch1))
  // 当前接口的id
  let id = useMatch1?.params.id;
  // const { token } = theme.useToken();
  // const { initialState } = useModel('@@initialState');
  const [InterfanceMsg, setInterfanceMsg] = useState<API.InterfanceInfo>();
  const [total, setTotal] = useState<number>(0);
  const [current, setCurrent] = useState<number>(1);
  const size = 20; // 每页显示的页数
  const [parmeter, setParmeter] = useState<string>();
  const [testResult, setTestResult] = useState<object>();
  const [showTest, setShowTest] = useState<boolean>(false);
  // 首次加载页面的是否分页查询数据
  //
  const getInterfanceByid = async () => {
    let res = await getPostByIdUsingGET({
      id: Number(id),
    });
    if (res.code === 0 && res.data != null) {
      setInterfanceMsg(res.data);
      // setInterfanceList(res.data.records);
      // setTotal(res?.data?.total ??  0);
      // setCurrent(res?.data?.current ?? 1);
    }
    console.log(res);
  };
  useEffect(() => {
    getInterfanceByid();
  }, []);
  // textarea的改变事件
  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    // console.log('Change:', e.target.value);
    setParmeter(e.target.value);
  };
  return (
    <PageContainer title={'Lm在线接口开放平台'}>
      <Card
        title="接口详情页"
        extra={
          <Button
            onClick={() => {
              showTest ? setShowTest(false) : setShowTest(true);
            }}
          >
            点击调试
          </Button>
        }
      >
        <Descriptions title={InterfanceMsg?.name} column={1}>
          <Descriptions.Item label="接口描述">{InterfanceMsg?.decprition}</Descriptions.Item>
          <Descriptions.Item label="接口地址">{InterfanceMsg?.url}</Descriptions.Item>
          <Descriptions.Item label="请求方式">{InterfanceMsg?.method}</Descriptions.Item>
          <Descriptions.Item label="参数类型">{InterfanceMsg?.parameters}</Descriptions.Item>
          <Descriptions.Item label="请求头">{InterfanceMsg?.requestheader}</Descriptions.Item>
          <Descriptions.Item label="响应头">{InterfanceMsg?.reposeheader}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{InterfanceMsg?.createtime}</Descriptions.Item>
          <Descriptions.Item label="更新时间">{InterfanceMsg?.updatetime}</Descriptions.Item>
        </Descriptions>
      </Card>

      {showTest && (
        <Card>
          <Form
            name="调试接口"
            labelCol={{ span: 0 }}
            wrapperCol={{ span: 0 }}
            initialValues={{ remember: true }}
            autoComplete="off"
          >
            <Form.Item
              label="接口参数"
              name="接口参数"
              rules={[{ required: true, message: '请输入接口参数' }]}
            >
              <TextArea
                // showCount

                // maxLength={200}
                style={{ height: 120, marginBottom: 24 }}
                onChange={onChange}
                // placeholder="can resize"
              />
            </Form.Item>

            <Form.Item wrapperCol={{ span: 16 }}>
              <Button
                type="primary"
                htmlType="submit"
                onClick={async () => {
                  console.log(parmeter);
                  let res = await invodeInterfanceUsingPOST({
                    id: InterfanceMsg?.id,
                    parameters: parmeter,
                  });
                  if (res.code == 0 && res.data != null) {
                    setTestResult(res);
                  } else {
                    message.error(res.message);
                    setTestResult(res);
                  }
                }}
              >
                调试
              </Button>
            </Form.Item>
          </Form>
        </Card>
      )}
      {testResult && <Card>{JSON.stringify(testResult)}</Card>}
    </PageContainer>
  );
};

export default IndexInrefanceInfo;
